<template>
  <div class="content-wraper">
    <div class="search-box">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="设备名称">
          <el-input v-model="deviceName" />
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="value"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getTime"
          />
        </el-form-item>
        <el-form-item label="使用情况">
          <el-select v-model="useDescription" placeholder="请选择">
            <el-option label="使用中" value="使用中" />
            <el-option label="已归还" value="已归还" />
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search()"
        >查询</el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh"
          @click="reset()"
        >重置</el-button>
        <el-button type="success" icon="el-icon-download" @click="handleDownload()">导出</el-button>
      </el-form>
    </div>
    <div class="detail">
      <com-table
        :data="dataList"
        :columns="columns"
        :total="total"
        @pageChange="pageChange"
      >
        <template v-slot:applyTime="{ row: { applyTime } }">
          {{ dateFormat(applyTime) }}
        </template>
        <template v-slot:unit="{ row: { unit } }">
          {{ unitList[unit - 1] }}
        </template>
        <template v-slot:status="{ row }">
          <a
            class="com-link"
            style="text-decoration: underline"
            @click="getWorkflowDetail(row)"
          >{{ row.status | formateFlowStatus }}</a>
        </template>
        <template v-slot:createTime="{ row: { createTime } }">
          {{ dateFormat(createTime) }}
        </template>
        <template v-slot:allocTime="{ row: { allocTime } }">
          {{ dateFormat(allocTime) }}
        </template>
      </com-table>
    </div>
  </div>
</template>

<script>
import { getDeviceUseLedgerList, exportDeviceUseLedger } from '@/api/consumableManage'
import moment from 'moment'
import { getDictName } from '@/utils/comm'
import { workflowStatus } from '@/utils/dicData'
export default {
  name: 'DeviceConfigPlanInfo',
  components: {},
  data() {
    return {
      value: '',
      useDescription: '',
      endMonth: '',
      startMonth: '',
      deviceName: '',
      getDictName,
      workflowStatus,
      dataList: [],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      unitList: ['台班', '小时', '月', '吨', 'm²', 'm³'],
      showModal: false,
      optType: 'add',
      unitDetail: {},
      columns: [
        {
          label: '单据编号',
          prop: 'docNumber',
          width: '180'
        },
        {
          label: '月份',
          prop: 'docMonth'
        },
        {
          label: '设备编号',
          prop: 'devNumber'
        },
        {
          label: '设备名称',
          prop: 'devName',
          width: '180'
        },
        {
          label: '规格型号',
          prop: 'specification'
        },
        {
          label: '单位',
          prop: 'unit',
          slot: 'unit'
        },
        {
          label: '单价',
          prop: 'unitPrice'
        },
        {
          label: '使用地点',
          prop: 'useUnit'
        },
        {
          label: '调出时间',
          prop: 'outTime'
        },
        {
          label: '工作时间',
          prop: 'workload'
        },
        {
          label: '调入时间',
          prop: 'inTime'
        },
        {
          label: '使用情况',
          prop: 'useDescription'
        },
        {
          label: '租金',
          prop: 'rent'
        }
      ]
      // 二期
      // columns: [
      //   {
      //     label: '单据编号',
      //     prop: 'allocNumber'
      //   },
      //   {
      //     label: '月份',
      //     prop: 'allocTime',
      //     slot: 'allocTime'
      //   },
      //   {
      //     label: '设备编号',
      //     prop: 'amount'
      //   },
      //   {
      //     label: '设备名称',
      //     prop: 'remark'
      //   },
      //   {
      //     label: '规格型号',
      //     prop: 'status',
      //     slot: 'status'
      //   },
      //   {
      //     label: '单位',
      //     prop: 'founderUnit'
      //   },
      //   {
      //     label: '单价',
      //     prop: 'createTime',
      //     slot: 'createTime'
      //   },
      //   {
      //     label: '使用地点',
      //     prop: 'founderUnit'
      //   },
      //   {
      //     label: '调出时间',
      //     prop: 'options',
      //     slot: 'options'
      //   },
      //   {
      //     label: '工作时间',
      //     prop: 'options',
      //     slot: 'options'
      //   },
      //   {
      //     label: '调入时间',
      //     prop: 'options',
      //     slot: 'options'
      //   },
      //   {
      //     label: '使用情况',
      //     prop: 'options',
      //     slot: 'options'
      //   },
      //   {
      //     label: '租金',
      //     prop: 'options',
      //     slot: 'options'
      //   }
      // ]
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    /** 导出数据 */
    handleDownload(e) {
      const params = {
        pageNum: 1,
        pageSize: 9999
      }
      exportDeviceUseLedger(params).then((res) => {
        const url = window.URL.createObjectURL(new Blob([res]), {
          type: 'application/vnd.ms-excel'
        })
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', `设备使用台账${new Date().getTime()}.xlsx`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    getTime(picker) {
      this.startMonth = picker[0]
      this.endMonth = picker[1]
    },
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams,
        startMonth: this.startMonth,
        endMonth: this.endMonth,
        useDescription: this.useDescription,
        deviceName: this.deviceName
      }
      getDeviceUseLedgerList(params).then((res) => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
          this.dataList.forEach((element) => {
            element.docMonth = element.docMonth.substring(0, 10)
          })
        }
      })
    },
    search() {
      this.pageParams.pageNum = 1
      this.getDataList()
    },
    reset() {
      this.pageParams.pageNum = 1
      this.startMonth = ''
      this.endMonth = ''
      this.useDescription = ''
      this.deviceName = ''
      this.getDataList()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail {
  height: calc(100% - 50px);
}
</style>
